<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 头部区域 -->
		<view class="header">
			<view class="header-content">
				<view class="nav-left" @tap="goBack">
					<image class="back-icon" src="/static/icons/arrow_left.png"></image>
				</view>
				<text class="title">我的发布</text>
			</view>
		</view>
		
		<!-- 分类标签栏 -->
		<view class="tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === tab.value }"
				@tap="switchTab(tab.value)"
			>
				<text class="tab-text">{{ tab.name }}</text>
				<text class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view scroll-y class="content" @scrolltolower="loadMore" refresher-enabled @refresherpulling="onPulling" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
			<!-- 数据加载中 -->
			<view class="loading-container" v-if="isLoading && !projects.length">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 数据为空时 -->
			<view class="empty-container" v-if="!isLoading && !projects.length">
				<image class="empty-image" src="/static/images/empty-publish.png"></image>
				<text class="empty-text">{{ getEmptyText() }}</text>
				<button class="action-btn" @tap="navigateToPublish">发布新项目</button>
			</view>
			
			<!-- 数据列表 -->
			<view class="project-list" v-if="projects.length">
				<view class="project-item" v-for="(project, index) in projects" :key="index" @tap="navigateToProjectDetail(project.id)">
					<view class="project-header">
						<text class="project-title">{{ project.title }}</text>
						<text class="project-status" :class="getStatusClass(project.status)">{{ getStatusText(project.status) }}</text>
					</view>
					<view class="project-info">
						<view class="info-row">
							<view class="info-item">
								<image class="info-icon" src="/static/icons/budget.png"></image>
								<text class="info-text">预算：{{ project.price }}</text>
							</view>
							<view class="info-item">
								<image class="info-icon" src="/static/icons/calendar.png"></image>
								<text class="info-text">截止：{{ project.duration }}</text>
							</view>
						</view>
						<view class="info-row">
							<view class="info-item">
								<image class="info-icon" src="/static/icons/bid.png"></image>
								<text class="info-text">已收到 {{ project.bidcount }} 份投标</text>
							</view>
							<view class="info-item">
								<image class="info-icon" src="/static/icons/view.png"></image>
								<text class="info-text">{{ project.Viewcount }} 人查看</text>
							</view>
						</view>
					</view>
					<view class="project-footer">
						<text class="publish-date">发布日期：{{ formatDate(project.created_at) }}</text>
						<view class="actions">
							<view class="action-item edit" v-if="project.status === 'open'" @tap.stop="editProject(project)">
								<image class="action-icon" src="/static/icons/edit.png"></image>
								<text class="action-text">编辑</text>
							</view>
							<view class="action-item cancel" v-if="project.status === 'open'" @tap.stop="cancelProject(project)">
								<image class="action-icon" src="/static/icons/cancel.png"></image>
								<text class="action-text">取消</text>
							</view>
							<view class="action-item view-bids" v-if="project.bidcount > 0" @tap.stop="viewBids(project)">
								<image class="action-icon" src="/static/icons/list.png"></image>
								<text class="action-text">查看投标</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 底部加载更多 -->
				<view class="load-more" v-if="hasMore">
					<view class="loading-spinner small"></view>
					<text class="loading-text">加载更多...</text>
				</view>
				<view class="load-more" v-else>
					<text class="loading-text">没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 悬浮按钮 -->
		<view class="float-btn" @tap="navigateToPublish">
			<image class="float-btn-icon" src="/static/icons/plus.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'all',
				isLoading: true,
				isRefreshing: false,
				hasMore: true,
				page: 1,
				pageSize: 10,
				tabs: [
					{ name: '全部', value: 'all', count: 0 },
					{ name: '进行中', value: 'open', count: 0 },
					{ name: '已确认', value: 'confirmed', count: 0 },
					{ name: '已完成', value: 'completed', count: 0 },
					{ name: '已取消', value: 'canceled', count: 0 }
				],
				projects: []
			}
		},
		onLoad() {
			const ishave = uni.getStorageSync("token")
			uni.request({
				url:'http://115.190.38.218/go/api/v1/check/ck',
				method:'GET',
				header: { 'Content-Type': 'application/json' ,
				  'Authorization': `Bearer ${ishave}` // 关键！格式必须为 "Bearer {token}"
				},
				success: (res) => {
					console.log("验证结果：",res)
					if(res.data.error == "无效令牌"){
						uni.showToast({
							title:"过期，重新登录",
							icon:'error'
						})
						
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				},
				fail: (err) => {
					console.log("验证失败：",err)
				}
			})
			
			this.loadProjects();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 加载项目列表
			loadProjects() {
				this.isLoading = true;
				const token = uni.getStorageSync("token")
				const info = uni.getStorageSync("info")
				console.log("类型：",info.id_card)
				uni.request({
					url: `http://115.190.38.218/go/api/v1/projects/user/${info.id_card}`,
					
					header: { 
					  'Authorization': `Bearer ${token}` // 关键！格式必须为 "Bearer {token}"
					},
					method:'GET',
					success:(res)=>{
						console.log("获取成功！",res)
						// 根据当前选中的标签筛选数据
						let filteredData = res.data;
						if (this.currentTab !== 'all') {
							filteredData = res.data.filter(item => item.status === this.currentTab);
						}
						
						// 更新数据
						this.projects = filteredData;
						
						// 更新标签计数
						this.updateTabCounts(res.data);
						
						// 更新加载状态
						this.isLoading = false;
						this.isRefreshing = false;
						
						// 假设只有一页数据
						this.hasMore = false;
					},
					fail:(err)=>{
						console.log("获取失败：",err)
					}
				})
				// 模拟API调用
				// setTimeout(() => {
					// 模拟数据
					// const mockData = [
					// 	{
					// 		id: '1',
					// 		title: '工业自动化设备控制系统开发',
					// 		budget: '500',
					// 		budgetUnit: '万元',
					// 		deadline: '2023-07-15',
					// 		publishDate: '2023-06-01',
					// 		status: 'open',
					// 		bidCount: 8,
					// 		viewCount: 156
					// 	},
					// 	{
					// 		id: '2',
					// 		title: '企业数据中心基础设施建设项目',
					// 		budget: '800',
					// 		budgetUnit: '万元',
					// 		deadline: '2023-07-30',
					// 		publishDate: '2023-05-28',
					// 		status: 'confirmed',
					// 		bidCount: 12,
					// 		viewCount: 205
					// 	},
					// 	{
					// 		id: '3',
					// 		title: '智能工厂MES系统集成与优化',
					// 		budget: '300',
					// 		budgetUnit: '万元',
					// 		deadline: '2023-06-30',
					// 		publishDate: '2023-05-15',
					// 		status: 'completed',
					// 		bidCount: 10,
					// 		viewCount: 178
					// 	},
					// 	{
					// 		id: '4',
					// 		title: '企业网络安全防护系统升级',
					// 		budget: '120',
					// 		budgetUnit: '万元',
					// 		deadline: '2023-06-15',
					// 		publishDate: '2023-05-10',
					// 		status: 'canceled',
					// 		bidCount: 5,
					// 		viewCount: 98
					// 	}
					// ];
					
					
				// }, 1000);
			},
			
			// 更新标签计数
			updateTabCounts(data) {
				// 获取每个状态的数量
				const statusCounts = data.reduce((counts, item) => {
					counts[item.status] = (counts[item.status] || 0) + 1;
					return counts;
				}, {});
				
				// 更新标签计数
				this.tabs = this.tabs.map(tab => {
					if (tab.value === 'all') {
						tab.count = data.length;
					} else {
						tab.count = statusCounts[tab.value] || 0;
					}
					return tab;
				});
			},
			
			// 切换标签
			switchTab(tabValue) {
				if (this.currentTab !== tabValue) {
					this.currentTab = tabValue;
					this.page = 1;
					this.projects = [];
					this.hasMore = true;
					this.loadProjects();
				}
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'open': '进行中',
					'confirmed': '已确认',
					'completed': '已完成',
					'canceled': '已取消'
				};
				return statusMap[status] || '未知状态';
			},
			
			// 获取状态类名
			getStatusClass(status) {
				return `status-${status}`;
			},
			
			// 格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// 下拉刷新
			onPulling() {
				// 下拉刷新触发时的回调
			},
			
			onRefresh() {
				// 处理刷新逻辑
				this.isRefreshing = true;
				this.page = 1;
				this.projects = [];
				this.hasMore = true;
				this.loadProjects();
			},
			
			// 上拉加载更多
			loadMore() {
				if (this.hasMore && !this.isLoading) {
					this.page++;
					this.loadProjects();
				}
			},
			
			// 获取空状态文本
			getEmptyText() {
				const emptyTextMap = {
					'all': '您还没有发布项目',
					'open': '没有正在进行中的项目',
					'confirmed': '没有已确认的项目',
					'completed': '没有已完成的项目',
					'canceled': '没有已取消的项目'
				};
				
				return emptyTextMap[this.currentTab] || '没有相关记录';
			},
			
			// 导航到项目详情
			navigateToProjectDetail(projectId) {
				uni.navigateTo({
					url: `/pages/project/project-detail?id=${projectId}`
				});
			},
			
			// 导航到发布项目页面
			navigateToPublish() {
				uni.navigateTo({
					url: '/pages/bid/bid-publish'
				});
			},
			
			// 编辑项目
			editProject(project) {
				uni.navigateTo({
					url: `/pages/bid/bid-publish?id=${project.id}&mode=edit`
				});
			},
			
			// 取消项目
			cancelProject(project) {
				uni.showModal({
					title: '取消项目',
					content: '确定要取消此项目吗？取消后无法恢复。',
					success: (res) => {
						if (res.confirm) {
							// 在实际项目中应该调用API取消项目
							uni.showToast({
								title: '项目已取消',
								icon: 'success'
							});
							// 重新加载数据
							setTimeout(() => {
								this.loadProjects();
							}, 1500);
						}
					}
				});
			},
			
			// 查看投标列表
			viewBids(project) {
				uni.navigateTo({
					url: `/pages/project/project-bids?id=${project.id}`
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		flex-direction: column;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #1d4ed8;
	}
	
	.header {
		background-color: #1d4ed8;
		padding: 20rpx 30rpx 40rpx;
	}
	
	.header-content {
		display: flex;
		align-items: center;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.title {
		font-size: 40rpx;
		font-weight: 600;
		color: #fff;
	}
	
	.tabs {
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
		position: relative;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}
	
	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 25rpx 10rpx;
	}
	
	.tab-text {
		font-size: 28rpx;
		color: #666;
		position: relative;
		padding-right: 15rpx;
	}
	
	.tab-badge {
		position: absolute;
		top: -8rpx;
		right: -12rpx;
		min-width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #f43f5e;
		color: #fff;
		font-size: 20rpx;
		border-radius: 18rpx;
		padding: 0 8rpx;
	}
	
	.tab-item.active {
		font-weight: 600;
	}
	
	.tab-item.active .tab-text {
		color: #1d4ed8;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 6rpx;
		background-color: #1d4ed8;
		border-radius: 3rpx;
	}
	
	.content {
		flex: 1;
		position: relative;
	}
	
	.loading-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.loading-spinner {
		width: 80rpx;
		height: 80rpx;
		border: 6rpx solid #e0e0e0;
		border-top-color: #1d4ed8;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}
	
	.loading-spinner.small {
		width: 36rpx;
		height: 36rpx;
		border-width: 4rpx;
		margin-bottom: 0;
		margin-right: 15rpx;
	}
	
	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
	
	.loading-text {
		font-size: 26rpx;
		color: #999;
	}
	
	.empty-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 100rpx 30rpx;
	}
	
	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
		text-align: center;
	}
	
	.action-btn {
		background-color: #1d4ed8;
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		padding: 0 60rpx;
	}
	
	.project-list {
		padding: 30rpx;
	}
	
	.project-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
	}
	
	.project-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	
	.project-title {
		flex: 1;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
		margin-right: 20rpx;
	}
	
	.project-status {
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
	}
	
	.status-open {
		background-color: #ecfdf5;
		color: #10b981;
	}
	
	.status-confirmed {
		background-color: #fff7ed;
		color: #f59e0b;
	}
	
	.status-completed {
		background-color: #f1f5f9;
		color: #6366f1;
	}
	
	.status-canceled {
		background-color: #fef2f2;
		color: #ef4444;
	}
	
	.project-info {
		background-color: #f9fafb;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	
	.info-row:last-child {
		margin-bottom: 0;
	}
	
	.info-item {
		display: flex;
		align-items: center;
	}
	
	.info-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	
	.info-text {
		font-size: 26rpx;
		color: #666;
	}
	
	.project-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.publish-date {
		font-size: 24rpx;
		color: #999;
	}
	
	.actions {
		display: flex;
		justify-content: flex-end;
	}
	
	.action-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 25rpx;
		border-radius: 30rpx;
		margin-left: 15rpx;
	}
	
	.action-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	
	.action-text {
		font-size: 26rpx;
	}
	
	.edit {
		background-color: #f0f9ff;
		color: #0ea5e9;
	}
	
	.cancel {
		background-color: #fef2f2;
		color: #ef4444;
	}
	
	.view-bids {
		background-color: #f5f3ff;
		color: #8b5cf6;
	}
	
	.load-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}
	
	.float-btn {
		position: fixed;
		right: 40rpx;
		bottom: 80rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #1d4ed8;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 20rpx rgba(29, 78, 216, 0.3);
		z-index: 100;
	}
	
	.float-btn-icon {
		width: 50rpx;
		height: 50rpx;
	}
</style> 